<template>
    <div class="content">
        <el-row class="enterprise_info hpx-title-border enterprise_info_int">
            <el-col :span="6" style="position: relative;margin-left: 20px;">
                <span class="hpx-label">报价机构：</span>
                <!-- @input="inputAcceptEnterprise"-->
                <el-input size="small" type="text" class="contactName" placeholder="请输入报价机构" v-model="filterForm.enterpriseName" @input="inputAcceptEnterprise" :disabled="isEditInfo"></el-input>
                <div class="tableRed err_msg_text">{{this.errMsgText}}</div>
                <Select :data="enterpriseList" @select-item="selectItem" v-if="isShowEnterprise"/>
            </el-col>
            <el-col :span="6">
                <span class="hpx-label">联系人：</span>
                <el-input size="small" type="text" class="contactName" placeholder="请输入联系人姓名" autofocus v-model="filterForm.contactName" :disabled="isEditInfo"></el-input>
            </el-col>
            <el-col :span="10">
                <span class="hpx-label">联系方式：</span>
                <el-input size="small" type="text" class="contactName" placeholder="请输入联系方式" autofocus v-model="filterForm.contactPhone" maxlength="11" :disabled="isEditInfo"></el-input>
            </el-col>
        </el-row>
        <el-form ref="form" :model="filterForm" label-width="120px" size="small" class="wantBill_condition">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="票据类型：">
                        <el-radio-group v-model="filterForm.billTypeId" size="small">
                            <el-radio-button v-for="item in billTypes" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="期限：">
                        <el-radio-group v-model="filterForm.deadlineTypeCode" size="small">
                            <el-radio-button v-for="item in termTypes" :label="item.key" :key="item.key" :disabled="intervalForms.length == 2">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="瑕疵可收：">
                        <el-radio-group v-model="filterForm.billFlaw" size="small">
                            <el-radio-button v-for="item in flaws" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="交易方式：">
                        <el-radio-group v-model="filterForm.buyType" size="small">
                            <el-radio-button v-for="item in transModes" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账户状态：">
                        <el-radio-group v-model="filterForm.customerStatus" size="small">
                            <!--:disabled="filterForm.customerStatus !=null"-->
                            <el-radio-button v-for="item in cusromerStatus" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row class="block_title hpx-label">期限区间报价</el-row>
        <el-main class="interval" v-for="(form,index) in intervalForms" :key="index">
            <el-row class="enterprise_info title_block hpx-title-border">
                <span class="title_text">期限区间：</span>
                <el-select v-model="form.defaultTypeYear" v-if="filterForm.deadlineTypeCode == 1702" size="small">
                    <el-option
                            v-for="item in yearType"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="form.time_interval"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        unlink-panels
                        :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
                <span class="top_btn want_bill_top_btn">
                    <el-button type="primary" plain size="small" @click="addOffer(index)">
                        <i class="iconfont icon-tianjia"></i> 添加更多
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteOffer(index)">
                        <i class="iconfont icon-shanchu"></i> 删除
                    </el-button>
                    <el-button type="danger" plain size="small" class="hpx-red-tips" v-if="intervalForms.length>=2" @click="deleteInterval(index)">
                        <i class="iconfont icon-shanchu"></i> 删除区间报价
                    </el-button>
                </span>
            </el-row>
            <template>
                <el-table :data="form.billOfferDetailList"
                          style="width: 100%;"
                          stripe
                          @selection-change="handleSelectionChange">
                    <el-table-column
                            v-if="nowIndex == index && isCheckBox"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column label="承兑机构">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.acceptorTypeId" placeholder="请选择" class="want_bill_int_style">
                                <el-option
                                        v-for="item in acceptTypes"
                                        :key="item.key"
                                        :label="item.label"
                                        :value="item.key">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="票面金额(万元)">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.bill_sum_price" placeholder="请选择" class="want_bill_int_style">
                                <template>
                                    <el-option
                                            v-for="item in billSumPrices"
                                            :key="item.key"
                                            :label="formatPrice(item)"
                                            @click.native.stop="selectedOption(scope.row, item, $event)"
                                            :value="item.key">
                                    </el-option>
                                </template>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="贴现率(%)" v-if="filterForm.billTypeId == 101 || filterForm.billTypeId == '101'">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.billRate" placeholder="贴现率" class="want_bill_int_style"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="贴现率(‰)" v-if="filterForm.billTypeId == 102 || filterForm.billTypeId == '102'">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.billRate" placeholder="贴现率" class="want_bill_int_style"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="每十万加(元)">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.billEveryPlus"  placeholder="每十万加" class="want_bill_int_style"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="btn_left" v-if="nowIndex == index && isCheckBox">
                    <el-button type="primary" size="small" @click="confirmDeleteOffer(index)">删除</el-button>
                </el-row>
            </template>
        </el-main>
        <el-row class="btn_center"
                v-if="filterForm.deadlineTypeCode == 1703 || (filterForm.deadlineTypeCode == 1702 && intervalForms.length != 2)">
            <el-button type="primary" plain size="small" @click="addInterval()">
                <i class="iconfont icon-tianjia"></i> 添加新的期限区间报价
            </el-button>
        </el-row>
        <el-row class="remarks">
            <span>原始报价：</span>
            <el-input type="textarea" v-model="filterForm.description"></el-input>
        </el-row>
        <el-row class="btn_center submit-btn">
            <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closePublish()">取消</el-button>
            <el-button size="small" type="primary" class="dialog-button" @click="publish()">发布</el-button>
        </el-row>
        <DialogInput ref="remin" title="自定义填写票面金额范围">
            <div class="rem-dialog-con">
                <el-row>
                    <el-radio-group v-model="default_range" size="medium">
                        <el-radio-button v-for="item in rangeBtns" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-row>
                <el-row v-if="default_range == -1" class="defaultPrice">
                    ( 0 ， <el-input v-model="price_range.highest" type="number" size="small" placeholder="请输入"></el-input> 万 )
                </el-row>
                <el-row v-if="default_range == 0" class="defaultPrice">
                    [ <el-input v-model="price_range.lowest" type="number" size="small" placeholder="请输入"></el-input> 万 ，
                    <el-input v-model="price_range.highest" type="number" size="small" placeholder="请输入"></el-input> 万 )
                </el-row>
                <el-row v-if="default_range == 1" class="defaultPrice">
                    [ <el-input v-model="price_range.lowest" type="number" size="small" placeholder="请输入"></el-input> 万 ， +∞ )
                </el-row>
                <el-row v-if="isExist" class="defaultPrice hpx-red-tips">
                    此选项已存在
                </el-row>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button type="info" size="small" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button type="primary" size="small" class="dialog-button" @click="submitInterval()">提交</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import DialogInput from '@component/common/DialogInput.vue';
    import Select from '@component/common/Select.vue';
    import _ from 'lodash'
    import moment from 'moment'
    import { wantBillTypes, wantTermTypes, wantFlawsTypes, wantTransModesTypes, wantCusromerStatusTypes, wantYearTypes, wantAcceptTypes, wantBillSumPricesTypes, wantRangeBtnsTypes } from '@/util/constantStatus'
    import { checkPhoneRex } from '@/util/format'
    class OfferInfo {
        constructor() {
            this.acceptorTypeId =  '401';
            this.acceptorTypeName = '';
            this.bill_sum_price =  '0';
            this.billSumPriceStart = '';
            this.billSumPriceEnd = '';
            this.billRate =  '';
            this.billEveryPlus =  '';
        }
        get bill_sum_price() { return this._bill_sum_price }
        set bill_sum_price(value) {
            if (value !== '7') { this._bill_sum_price = value; }
        }
    }
    @Component({
        components: {
            DialogInput,
            Select
        }
    })
    export default class NewOffer extends Vue {
        isEditName = false
        isEditPhone = false
        isErrorMsg: boolean = false
        errMsgText: string = ''
        isEditInfo: boolean = false
        //筛选条件
        filterForm = {
            enterpriseName: '',
            contactName: '',
            contactPhone: '',
            billTypeId: 101,
            deadlineTypeCode: 1703, //期限类型
            billFlaw: 0,
            buyType: 1801,  //交易方式
            customerStatus: 0,
            description: '',
            enterpriseId: ''
        }
        enterpriseList: any = []
        isShowEnterprise: boolean = false;
        // 选择企业
        selectItem (item) {
            this.isShowEnterprise = false
            this.filterForm.enterpriseName = item.enterprise_name;
            this.filterForm.enterpriseId = item.id;
        }
        // 输入企业
        inputAcceptEnterprise () {
            if (this.filterForm.enterpriseName) {
                this.getEnterpriseList()
            }
        }
        async getEnterpriseList () {
            let res = await this.$http.get(`customers/enterprise/queryEnterpriseByName?enterpriseName=${this.filterForm.enterpriseName}`)
            if (res.status == 200) {
                if (res.data != '') {
                    this.enterpriseList = res.data;
                    this.isShowEnterprise = true;
                    this.errMsgText = '';
                } else {
                    this.isErrorMsg = true
                    this.errMsgText = '未找到相关企业';
                }
            }
        }

        //筛选按钮
        billTypes = wantBillTypes;
        termTypes = wantTermTypes;
        flaws = wantFlawsTypes;
        transModes = wantTransModesTypes;
        cusromerStatus = wantCusromerStatusTypes;
        //半年/一年
        yearType = wantYearTypes;

        //删除勾选框的报价区间
        nowIndex = -1
        //是否显示勾选框
        isCheckBox = false
        //待删除的报价区间
        willDelete:any = []
        //期限区间模板
        intervalForms:any = []
        intervalForm = {
            defaultTypeYear: '1',
            time_interval: [new Date(),new Date().setDate(new Date().getDate() + 1)],
            startTime: '',
            endTime: '',
            termType: '',
            billOfferDetailList: [
                new OfferInfo(),
                new OfferInfo(),
                new OfferInfo()
            ]
        }
        //承兑机构类型
        acceptTypes = wantAcceptTypes;
        //票面金额
        billSumPrices = wantBillSumPricesTypes;
        //格式化票面金额
        formatPrice (item) {
            return item.key === '' ? '请选择' : (item.key === '7' ? '自定义' : (item.gtoe ? '[' + item.billSumPriceStart + ',' + item.billSumPriceEnd + ')' : '(' + item.billSumPriceStart + ',' + item.billSumPriceEnd + ')'))
        }
        //自定义票面金额范围按钮
        rangeBtns = wantRangeBtnsTypes;
        //默认自定义金额范围
        default_range = -1
        //自定义票面金额区间
        price_range = {
            lowest: '0',
            highest: ''
        }
        //正在修改金额区间的报价
        modifyRow:any = {}
        //已存在选项
        isExist = false
        //查询报价详情
        async getOfferDetail () {
            let res = await this.$http.get(`pcc/admin/getPccBillOfferDetails/${this.$route.params.id}`)
            if(res.status == 200){
                this.filterForm.billTypeId = res.data.billTypeId
                this.filterForm.deadlineTypeCode = res.data.deadlineTypeCode
                this.filterForm.billFlaw = res.data.billFlawId
                this.filterForm.buyType = res.data.tradeTypeId
                this.filterForm.enterpriseName = res.data.enterpriseName
                this.filterForm.contactName = res.data.contactName
                this.filterForm.contactPhone = res.data.contactPhone
                if (res.data.enterpriseName != null && res.data.enterpriseName != undefined && res.data.enterpriseName != '') {
                    this.isEditInfo = true
                }
                this.intervalForms = res.data.pccOfferTimeDtos
                let intervals = res.data.pccOfferTimeDtos
                intervals.forEach((el,index) => {
                    this.$set(this.intervalForms[index],'time_interval',[intervals[index].startTime,intervals[index].endTime])
                    this.$set(this.intervalForms[index],'billOfferDetailList',intervals[index].pccBillDetails)
                    let detailList = this.intervalForms[index].billOfferDetailList
                    detailList.forEach((ele,i) => {
                        detailList[i].billEveryPlus = intervals[index].pccBillDetails[i].offerEveryPlus
                        let billSumPriceStr = intervals[index].pccBillDetails[i].billPriceRegion
                        let acceptorTypeStr = intervals[index].pccBillDetails[i].acceptorName
                        let billSumPriceObj = this.billSumPrices.filter(el => {return el.label == billSumPriceStr})
                        let acceptorTypeObj = this.acceptTypes.filter(el => {return el.label == acceptorTypeStr})
                        if(billSumPriceObj)
                            this.$set(this.intervalForms[index].billOfferDetailList[i],'bill_sum_price',billSumPriceObj[0].key)
                        if(acceptorTypeObj)
                            this.$set(this.intervalForms[index].billOfferDetailList[i],'acceptorTypeId',acceptorTypeObj[0].key)
                    });
                });
            }
        }

        //填充期限区间模板
        async fillingTemplate () {
            let interval = _.cloneDeep(this.intervalForm)
            this.intervalForms.push(interval)
        }
        //添加新的期限区间
        addInterval () {
            this.fillingTemplate()
        }
        //删除期限区间
        deleteInterval (index:number) {
            this.intervalForms.splice(index,1)
        }
        //添加更多报价
        addOffer (index:number) {
            this.intervalForms[index].billOfferDetailList.push(new OfferInfo())
        }
        //显示/隐藏删除勾选框
        deleteOffer (index:number) {
            this.nowIndex = index
            this.isCheckBox = !this.isCheckBox
            this.intervalForms[index].billOfferDetailList.map((item,$index) => {
                item.index = $index
            })
        }
        //勾选
        handleSelectionChange (val:any) {
            this.willDelete = [...val]
        }
        //确认删除
        confirmDeleteOffer (i:number) {
            this.willDelete.map((item:any) => {
                let selectedIdx = _.findIndex(this.intervalForms[i].billOfferDetailList, (o:any) => item.index === o.index)
                this.intervalForms[i].billOfferDetailList.splice(selectedIdx, 1)
            })
            this.willDelete = [];
            this.isCheckBox = !this.isCheckBox
        }
        //选择金额区间
        selectedOption (row, item, e) {
            this.modifyRow = row
            if(item.key == '7'){
                this.$refs['remin'].openDialog();
                this.price_range = {
                    lowest: '0',
                    highest: ''
                }
            }
        }
        //提交自定义期限区间
        submitInterval () {
            //自定义的金额区间字符串
            let lastOpt = {
                //key: this.billSumPrices.length-1
            }
            if(this.default_range == -1){
                //lastOpt = '(0,' + this.price_range.highest +')'
                lastOpt = {
                    label: '',
                    key: this.billSumPrices.length,
                    billSumPriceStart: '0',
                    billSumPriceEnd: this.price_range.highest,
                    gtoe: false,
                    ltoe: false
                }
            }else if(this.default_range == 1){
                // lastOpt = '['+ this.price_range.lowest + ',+∞)'
                lastOpt = {
                    label: '',
                    key: this.billSumPrices.length,
                    billSumPriceStart: this.price_range.lowest,
                    billSumPriceEnd: '+∞',
                    gtoe: true,
                    ltoe: false
                }
            }else{
                // lastOpt = '['+ this.price_range.lowest + ',' + this.price_range.highest +')'
                lastOpt = {
                    label: '',
                    key: this.billSumPrices.length,
                    billSumPriceStart: this.price_range.lowest,
                    billSumPriceEnd: this.price_range.highest,
                    gtoe: true,
                    ltoe: false
                }
            }
            //选项中已存在
            if(this.billSumPrices.indexOf(lastOpt)>-1){
                this.isExist = true
                return
            }else{
                //把自定义的金额区间追加进金额下拉框
                this.billSumPrices.splice(this.billSumPrices.length-1,0,lastOpt)
                //选中自定义的金额区间
                this.modifyRow.bill_sum_price = lastOpt.key
                this.$refs['remin'].closeDialog();
                this.isExist = false
            }
        }
        //发布
        async publish () {
            if (!this.filterForm.enterpriseName) {
                this.$alert('请输入报价机构!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!this.filterForm.enterpriseId || this.filterForm.enterpriseId == '' || this.filterForm.enterpriseId == null || this.filterForm.enterpriseId == undefined) {
                this.$alert('请输入正确的机构!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!this.filterForm.contactName) {
                this.$alert('请输入联系人!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!this.filterForm.contactPhone) {
                this.$alert('请输入联系方式!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!checkPhoneRex(this.filterForm.contactPhone)) {
                this.$alert('请输入正确的联系方式!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let billOfferEditVo = {
                billOfferId: this.$route.params.id,
                billOfferVo: {
                    billOfferId: this.$route.params.id,
                    enterpriseName: this.filterForm.enterpriseName,
                    enterpriseId: this.filterForm.enterpriseId,
                    contactName: this.filterForm.contactName,
                    contactPhone: this.filterForm.contactPhone,
                    billTypeId: this.filterForm.billTypeId,
                    buyType: this.filterForm.buyType,
                    billFlaw: this.filterForm.billFlaw,
                    deadlineTypeCode: this.filterForm.deadlineTypeCode,
                    customerStatus: this.filterForm.customerStatus,
                    description: this.filterForm.description,
                },
                billOfferDetailVoList: [
                    {
                        startTime: '',
                        endTime: '',
                        termType: '',
                        billOfferDetailList: [
                            {
                                acceptorTypeId: '',
                                acceptorTypeName: '',
                                billSumPriceStart: '',
                                billSumPriceEnd: '',
                                billRate: '',
                                billEveryPlus: ''
                            }
                        ]
                    }
                ]
            }

            for(let i = 0; i<this.intervalForms.length;i++){
                this.intervalForms[i].startTime = moment(this.intervalForms[i].time_interval[0]).format('YYYY-MM-DD')
                this.intervalForms[i].endTime = moment(this.intervalForms[i].time_interval[1]).format('YYYY-MM-DD')
                this.intervalForms[i].termType = this.filterForm.deadlineTypeCode
                for(let k = 0;k<this.intervalForms[i].billOfferDetailList.length;k++){
                    if(this.intervalForms[i].billOfferDetailList[k].billRate == ''){
                        this.$alert('请输入贴现率','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box'
                        })
                        return false
                    }
                    let acceptTypeKey = this.intervalForms[i].billOfferDetailList[k].acceptorTypeId
                    let priceKey = this.intervalForms[i].billOfferDetailList[k].bill_sum_price

                    this.intervalForms[i].billOfferDetailList[k].acceptorTypeName = this.getList(acceptTypeKey,this.acceptTypes)[0].label
                    this.intervalForms[i].billOfferDetailList[k].billSumPriceStart = this.getList(priceKey,this.billSumPrices)[0].billSumPriceStart
                    this.intervalForms[i].billOfferDetailList[k].billSumPriceEnd = this.getList(priceKey,this.billSumPrices)[0].billSumPriceEnd == '+∞' ? '100000' : this.getList(priceKey,this.billSumPrices)[0].billSumPriceEnd
                }
            }
            billOfferEditVo.billOfferDetailVoList = [...this.intervalForms]
            let url = ''
            let res = null
            if(this.$route.params.id){
                //修改
                url = 'pcc/admin/updateBillOfferOrDetail'
                res = await this.$http.put(url,billOfferEditVo)
            }else{
                //新增
                let billOfferAddVo = billOfferEditVo
                url = 'pcc/admin/addBillOffer'
                res = await this.$http.post(url,billOfferAddVo)
            }
            if(res.status == 200){
                this.$router.push('/trade/wantBill')
            }
        }
        getList (key,list) {
            return list.filter(item => item.key === key)
        }
        closePublish () {
            this.$router.push('/trade/wantBill')
        }
        closeDialog () {
            //如果点击取消,自动选中之前的选项
            // this.modifyRow.row.bill_sum_price = '请选择'
            this.$refs['remin'].closeDialog();
        }
        created () {

        }
        mounted () {
            if(this.$route.params.id){
                this.getOfferDetail()
            }
            // this.getCustomer()
            this.fillingTemplate()
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_info{
        height: 50px;
        line-height: 50px;
        font-size: $__font-size-default;
        background: $__color-bg-unimportance;
        .title_text{
            margin-left: 10px;
        }
        .col{
            margin-left: 50px;
        }
        .col:first-child{
            margin-left: 10px;
        }
        /*.contactName{*/
            /*width: 200px;*/
        /*}*/
        .editBtn{
            cursor: pointer;
        }
    }
    .wantBill_condition{
        padding-top: 18px;
    }
    .block_title{
        font-size: 18px;
        line-height: 40px;
    }
    .interval{
        border: 1px dashed $__color-border;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .data_picker{
        .el-input__inner{
            width: 160px !important;
            height: 32px !important;
            line-height: 32px !important;
        }
    }
    .defaultPrice{
        margin-top: 30px;
        .el-input{
            width: 80px !important;
            .el-input__inner{
                height: 32px !important;
            }
        }
    }
    .btn_center{
        padding: 20px 0;
        text-align: center;
    }
    .btn_left{
        padding: 10px 0;
    }
    .remarks {
        display: flex;
        span{
            width: 106px;
            text-indent: 14px;
            font-size: 16px;
        }
    }
    .content {
        margin-top: 8px;
    }
</style>
<style lang="scss">
    .enterprise_info_int {
        .el-input {
            width: 200px;
        }
    }
    .wantBill_condition{
        .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
            background-color: $__color-primary;
            color: #fff;
            border: 1px solid $__color-primary;
        }
    }
    .want_bill_top_btn {
        float: right;
        margin-right: 20px;
        .iconfont {
            font-size: $__little-font-size;
        }
    }
    .interval {
        padding: 0;
    }
    .err_msg_text {
        position: absolute;
        left: 90px;
        top: 30px;
        font-size: 14px;
    }
</style>